<template>
  <div>
    <el-dialog :title="!dataForm.id ? $t('Common.Add') : $t('Common.Edit')" :close-on-click-modal="false" :visible.sync="visible">
      <el-form :model="dataForm" ref="dataForm" label-width="auto">
        <el-form-item label="服务商编号">
          <span>{{dataForm.id}}</span>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" v-show="dataForm.type === 2" prop="name"><el-input :readonly="readonly" v-model="dataForm.name" placeholder="名字"></el-input></el-form-item>
            <el-form-item label="公司名称" v-show="dataForm.type === 1" prop="name">
              <el-input :readonly="readonly" v-model="dataForm.companyName" placeholder="公司名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件类型" v-show="dataForm.type === 2" prop="cardType">
              <el-input :readonly="readonly" v-model="dataForm.cardType" placeholder="证件类型"></el-input>
            </el-form-item>
            <el-form-item label="法人" v-show="dataForm.type === 1" prop="legalPerson">
              <el-input :readonly="readonly" v-model="dataForm.legalPerson" placeholder="法人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证件号码" v-show="dataForm.type === 2" prop="idCard">
              <el-input :readonly="readonly" v-model="dataForm.idCard" placeholder="证件号码"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信息码" v-show="dataForm.type === 1" prop="unifiedCode">
              <el-input :readonly="readonly" v-model="dataForm.unifiedCode" placeholder="统一社会信息码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="linkTel"><el-input :readonly="readonly" v-model="dataForm.linkTel" placeholder="手机号"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="dataForm.type === 1">
          <el-col :span="12">
            <el-form-item label="公司经营地址" prop="companyAddress">
              <el-input :readonly="readonly" v-model="dataForm.companyAddress" placeholder="公司经营地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人姓名" prop="linkName"><el-input :readonly="readonly" v-model="dataForm.linkName" placeholder="联系人姓名"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="linkTel"><el-input :readonly="readonly" v-model="dataForm.linkEmail" placeholder="linkEmail"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="意向代理城市" prop="proxyCity"><el-input :readonly="readonly" v-model="dataForm.proxyCity" placeholder="意向代理城市"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!--<el-col :span="12">
            <el-form-item label="所属行业" prop="companyTel">
              <el-select v-model="dataForm.industryInvolved" placeholder="所属行业">
                <el-option
                  v-for="item in industryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-form-item label="了解招商途径" prop="theWay">
            <el-radio-group v-model="dataForm.theWay">
              <el-radio label="招商大会" name="JoinWay">招商大会</el-radio>
              <el-radio label="朋友介绍" name="JoinWay">朋友介绍</el-radio>
              <el-radio label="网络信息" name="JoinWay">网络信息</el-radio>
              <el-radio label="渠道推荐" name="JoinWay">渠道推荐</el-radio>
              <el-radio label="其他" name="JoinWay">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row v-show="dataForm.type === 2">
          <el-form-item label="个人情况介绍" prop="companyAddress">
            <quill-editor
              style=" height: 200px;overflow-y: scroll;"
              class="editor"
              v-model="dataForm.introduction"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
            ></quill-editor>
          </el-form-item>
        </el-row>
        <el-row v-show="dataForm.type === 1">
          <el-col :span="12">
            <el-form-item label="企业法人" prop="businessProject"><el-input :readonly="readonly" v-model="dataForm.legalPerson" placeholder="企业法人"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信息码" prop="companyScale">
              <el-input :readonly="readonly" v-model="dataForm.unifiedCode" placeholder="统一社会信息码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="dataForm.type === 1">
          <el-col :span="12">
            <el-form-item label="企业类型" prop="businessProject"><el-input :readonly="readonly" v-model="dataForm.companyType" placeholder="企业类型"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册资本" prop="companyScale"><el-input :readonly="readonly" v-model="dataForm.registeredCapital" placeholder="注册资本"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="dataForm.type === 1">
          <el-col :span="12">
            <el-form-item label="注册地址" prop="businessProject">
              <el-input :readonly="readonly" v-model="dataForm.registeredAddress" placeholder="注册地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业期限" prop="companyScale"><el-input :readonly="readonly" v-model="dataForm.businessTerm" placeholder="营业期限"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="dataForm.type === 1">
          <el-col :span="12">
            <el-form-item label="主营项目" prop="businessProject">
              <el-input :readonly="readonly" v-model="dataForm.businessProject" placeholder="主营项目"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司规模" prop="companyScale"><el-input :readonly="readonly" v-model="dataForm.companyScale" placeholder="公司规模"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="dataForm.type === 1">
          <el-col :span="12">
            <el-form-item label="经营范围" prop="businessProject"><el-input :readonly="readonly" v-model="dataForm.businessScope" placeholder="经营范围"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司电话" prop="companyScale"><el-input :readonly="readonly" v-model="dataForm.companyTel" placeholder="公司电话"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预计投入资金" prop="constInput"><el-input :readonly="readonly" v-model="dataForm.constInput" placeholder="预计投入资金"></el-input></el-form-item>
          </el-col>
          <!--          <el-col :span="12">
            <el-form-item label="申请时间" prop="applyTime">
              <el-input :readonly="readonly" v-model="dataForm.applyTime" placeholder="申请时间"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog>

        <el-row v-show="dataForm.type === 1">
          <el-col :span="8">
            <el-form-item label="营业执照" prop="yyImg">
              <!--              <el-upload
                class="avatar-uploader"
                :action="uploadAction"
                :on-preview="handlePictureCardPreview"
                :show-file-list="false"
                :on-success="(res)=>{
               this.dataForm.yyImg = res.url;
              }"
                :before-upload="beforeCardUpload"
              >
                <img v-if="dataForm.yyImg" :src="dataForm.yyImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> -->
              <el-upload
                :class="fileList.length > 0 ? 'disabled' : ''"
                :action="uploadAction"
                list-type="picture-card"
                :auto-upload="true"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess"
                :file-list="fileList"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleDownload(file)"><i class="el-icon-download"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleRemove(file)"><i class="el-icon-delete"></i></span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="dataForm.type === 2">
          <el-col :span="8">
            <el-form-item label="身份证照正面" prop="sfzFront">
              <!-- <el-upload
                class="avatar-uploader"
                :action="uploadAction"
                :show-file-list="false"
                :on-success="(res)=>{
               this.dataForm.sfzFront = res.url;
              }"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="dataForm.sfzFront" :src="dataForm.sfzFront" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> -->
              <el-upload
                :class="sfzzmList.length > 0 ? 'disabled' : ''"
                :action="uploadAction"
                list-type="picture-card"
                :auto-upload="true"
                :on-remove="sfzzmRemove"
                :on-success="sfzzmAvatarSuccess"
                :file-list="sfzzmList"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleDownload(file)"><i class="el-icon-download"></i></span>
                    <span class="el-upload-list__item-delete" @click="sfzzmRemove(file)"><i class="el-icon-delete"></i></span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :span="6" label="身份证照背面" prop="sfzBack">
              <!-- <el-upload
                class="avatar-uploader"
                :action="uploadAction"
                :show-file-list="false"
                :on-success="(res)=>{
               this.dataForm.sfzBack = res.url;
              }"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="dataForm.sfzBack" :src="dataForm.sfzBack" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> -->
              <el-upload
                :class="sfzBackList.length > 0 ? 'disabled' : ''"
                :action="uploadAction"
                list-type="picture-card"
                :auto-upload="true"
                :on-remove="sfzBackRemove"
                :on-success="sfzBackAvatarSuccess"
                :file-list="sfzBackList"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleDownload(file)"><i class="el-icon-download"></i></span>
                    <span class="el-upload-list__item-delete" @click="sfzBackRemove(file)"><i class="el-icon-delete"></i></span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证照手持" prop="sfzHand">
              <!-- <el-upload
                class="avatar-uploader"
                :action="uploadAction"
                :show-file-list="false"
                :on-success="(res)=>{
               this.dataForm.sfzHand = res.url;
              }"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="dataForm.sfzHand" :src="dataForm.sfzHand" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> -->
              <el-upload
                :class="sfzHandList.length > 0 ? 'disabled' : ''"
                :action="uploadAction"
                list-type="picture-card"
                :auto-upload="true"
                :on-remove="sfzHandRemove"
                :on-success="sfzHandAvatarSuccess"
                :file-list="sfzHandList"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                    <span class="el-upload-list__item-delete" @click="handleDownload(file)"><i class="el-icon-download"></i></span>
                    <span class="el-upload-list__item-delete" @click="sfzHandRemove(file)"><i class="el-icon-delete"></i></span>
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
        <el-button type="primary" @click="dataFormSubmit()">{{ $t('Common.Confirm') }}</el-button>
      </span>
    </el-dialog>

    <gallery :images="[showImage]" :index="index" @close="index = null" />
  </div>
</template>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.disabled .el-upload--picture-card {
  display: none;
}
</style>
<script>
import VueGallery from 'vue-gallery';

export default {
  components: {
    gallery: VueGallery
  },
  data() {
    return {
      fileList: [],
      sfzzmList: [],
      sfzBackList: [],
      sfzHandList: [],
      uploadAction: '',
      visible: false,
      dialogImageUrl: '',
      dialogVisible: false,
      readonly: false,
      dataForm: {
        otherImgs: '',
        id: 0,
        userId: '',
        owner: '',
        name: '',
        star: '',
        address: '',
        linkName: '',
        linkTel: '',
        tel: '',
        handle: '',
        openTime: '',
        wake: '',
        wifi: '',
        park: '',
        breakfast: '',
        unionpay: '',
        gym: '',
        boardroom: '',
        water: '',
        policy: '',
        introduction: '',
        img: '',
        rule: '',
        prompt: '',
        bqLogo: '',
        support: '',
        ewmLogo: '',
        time: '',
        coordinates: '',
        scort: '',
        sfzImg1: '',
        sfzImg2: '',
        yyImg: '',
        other: '',
        zdMoney: '',
        state: '',
        sqTime: '',
        isUse: '',
        llNum: '',
        bdId: '',
        yeOpen: '',
        wxOpen: '',
        ddOpen: ''
      },
      showImage: '',
      index: null
    };
  },
  methods: {
    //下载
    handleDownload(file) {
      window.open(file.url);
    },
    //预览
    handlePictureCardPreview(file) {
      // window.open(file.url)
      // console.log(file.url)
      // this.$alert('<img style="width: 100%;" src="'+file.url+'" />', '预览', {
      //   dangerouslyUseHTMLString: true
      // });
      this.index = 0;
      this.showImage = file.url;
    },
    //营业执照
    handleRemove(file, fileList) {
      this.dataForm.yyImg = undefined;
      this.fileList = [];
    },
    handleAvatarSuccess(res, file) {
      const { url } = res;
      this.fileList.push({
        name: url,
        url: url
      });
    },
    //身份正面
    sfzzmRemove(file, fileList) {
      this.dataForm.sfzFront = undefined;
      this.sfzzmList = [];
    },
    sfzzmAvatarSuccess(res, file) {
      const { url } = res;
      this.sfzzmList.push({
        name: url,
        url: url
      });
    },
    //身份反面
    sfzBackRemove(file, fileList) {
      this.dataForm.sfzBack = undefined;
      this.sfzBackList = [];
    },
    sfzBackAvatarSuccess(res, file) {
      const { url } = res;
      this.sfzBackList.push({
        name: url,
        url: url
      });
    },
    //身份手持
    sfzHandRemove(file, fileList) {
      this.dataForm.sfzHand = undefined;
      this.sfzHandList = [];
    },
    sfzHandAvatarSuccess(res, file) {
      const { url } = res;
      this.sfzHandList.push({
        name: url,
        url: url
      });
    },
    init(id) {
      this.fileList = [];
      this.sfzzmList = [];
      this.sfzBackList = [];
      this.sfzHandList = [];
      this.dataForm.id = id || 0;
      this.visible = true;
      this.uploadAction = this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`);
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/hotel/facilitator/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm = data.facilitators;
              this.dataForm.otherImgs = data.facilitators.otherImgs ? data.facilitators.otherImgs : '';
              if (data.facilitators.yyImg) {
                this.fileList.push({
                  name: data.facilitators.yyImg,
                  url: data.facilitators.yyImg
                });
              }
              if (data.facilitators.sfzFront) {
                this.sfzzmList.push({
                  name: data.facilitators.sfzFront,
                  url: data.facilitators.sfzFront
                });
              }
              if (data.facilitators.sfzBack) {
                this.sfzBackList.push({
                  name: data.facilitators.sfzBack,
                  url: data.facilitators.sfzBack
                });
              }
              if (data.facilitators.sfzHand) {
                this.sfzHandList.push({
                  name: data.facilitators.sfzHand,
                  url: data.facilitators.sfzHand
                });
              }
            }
          });
        }
      });
    },
    beforeCardUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt2M;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/hotel/facilitator/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              ...this.dataForm,
              yyImg: this.fileList.length > 0 ? this.fileList[0].url : '',
              sfzFront: this.sfzzmList.length > 0 ? this.sfzzmList[0].url : '',
              sfzBack: this.sfzBackList.length > 0 ? this.sfzBackList[0].url : '',
              sfzHand: this.sfzHandList.length > 0 ? this.sfzHandList[0].url : ''
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.fileList = [];
                  this.sfzzmList = [];
                  this.sfzBackList = [];
                  this.sfzHandList = [];
                  this.visible = false;
                  this.$emit('refreshDataList');
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
